<template>
  <div class="box">
    <h1>组件间通信4: v-model</h1>

    <!-- 
      v-model在原生标签上
      本质: 动态value和原生的input监听(将最新输入值更新给data数据)
      实现双向数据绑定
     -->
    <h2>1. 用在原生标签上</h2>
    <input type="text" v-model="msg1"> {{msg1}}
    <br>
    <input type="text" :value="msg1" @input="msg1=$event.target.value">

    <!-- 
      v-model在组件标签上
      本质: 动态value和自定义的input监听(将接收到的数据更新给data数据)
      实现父子组件间相互通信(数据双向同步)
     -->

    <h2>2. 用在组件标签上</h2>
    <h2>需求: 自定义带左侧标题的输入框</h2>
    <custom-input title="消息22" v-model="msg2"></custom-input>
    <custom-input title="消息1" :value="msg2" @input="msg2=$event"></custom-input>
    {{msg2}}
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data () {
      return {
        msg1: 'abc',
        msg2: 'atguigu'
      }
    },
    components: {
      CustomInput
    }
  }
</script>
